<template>
  <div class="app-container" v-loading="loading">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="医院评价" name="0">
        <Hostail :list="hospOptions" @childfun="childfun" ref="hostail"></Hostail>
      </el-tab-pane>
      <el-tab-pane label="管家" name="1">
        <Housekeeper :keeper="keeper" ref="keeper" v-if="reset"></Housekeeper>
      </el-tab-pane>
      <el-tab-pane label="医生评价" name="2">
        <Doctor :doctor="doctor" ref="doctor" v-if="reset"></Doctor>
      </el-tab-pane>
      <el-tab-pane label="项目评价" name="3">
        <Project :project="project" ref="project" v-if="reset"></Project>
      </el-tab-pane>
    </el-tabs>
    <el-carousel ref="carousel" :autoplay="false" arrow="never">
      <el-carousel-item v-for="(item, index) in 4" :key="item">
        <!-- <h3>{{ index }}</h3> -->
        <el-button @click="changfn(index)" v-if="activeName!=3">下一页</el-button>
        <el-button @click="sure" style="margin-bottom:30px;margin-left:20px" v-if="activeName==3">提交</el-button>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { hospitalDropDown } from "@/api/doctorManage";
import {
  butlerListDropdown,
  listDoctorsDropdown,
  findAllProjectListOfHospital,
  saveComment
} from "@/api/itemEvaluate";
import Hostail from "./hostial.vue";
import Housekeeper from "./Housekeeper.vue";
import Doctor from "./doctor.vue";
import Project from "./project.vue";
export default {
  name: "ItemEvaluateAdd",
  components: { Hostail, Housekeeper, Doctor, Project },
  data() {
    return {
      reset: true,
      activeName: "0",
      hospOptions: [],
      loading: true,
      params: {},
      keeper: [],
      project: [],
      doctor: [],
      ischeck: ["", "", "", ""]
    };
    ss;
  },
  mounted() {
    this.list();
  },
  methods: {
    async childfun(val) {
      /**医院 */
      this.reset = false;
      this.loading = true;
      let res = await butlerListDropdown({ hospitalId: val.hospitalId });
      let res2 = await listDoctorsDropdown({ id: val.hospitalId });
      let res3 = await findAllProjectListOfHospital({ id: val.hospitalId });
      // console.log(res);

      setTimeout(() => {
        this.reset = true;
        this.loading = false;
      }, 500);
      if (res.data.code == 0) {
        this.keeper = res.data.data ? res.data.data : [];
      }
      if (res2.data.code == 0) {
        this.doctor = res2.data.data ? res2.data.data : [];
      }
      if (res3.data.code == 0) {
        this.project = res3.data.data ? res3.data.data : [];
      }
    },

    list() {
      hospitalDropDown().then(res => {
        let resData = res.data.data;
        // let newData = [];
        // resData.forEach(e => {
        //   newData.push({
        //     value: e.id + "",
        //     label: e.name
        //   });
        // });
        this.hospOptions = resData;
        this.loading = false;
      });
    },
    changfn(index, type) {
      /**校验 */
      if (this.check() && !type) {
        return;
      }

      if (!type) {
        this.activeName = index == 3 ? "0" : index + 1 + "";
        // console.log(index);
      }
      this.$refs.carousel.setActiveItem(type ? index : index - 0 + 1);
    },
    check() {
      if (this.activeName == "0") {
        if (!this.$refs.hostail.checkfn()) return true;
      }
      if (this.activeName == "1") {
        if (!this.$refs.keeper.checkfn()) return true;
      }
      if (this.activeName == "2") {
        if (!this.$refs.doctor.checkfn()) return true;
      }
    },
    async sure() {
      if (this.activeName == "3") {
        console.log(this.$refs.project.checkfn());
        if (!this.$refs.project.checkfn()) return;
      }

      if (
        !this.$refs.hostail.checkfn() ||
        !this.$refs.keeper.checkfn() ||
        !this.$refs.doctor.checkfn()
      ) {
        if (!this.$refs.hostail.checkfn()) {
          this.activeName = "0";
          this.changfn(this.activeName, "now");
        }
        if (!this.$refs.keeper.checkfn()) {
          this.activeName = "1";
          this.changfn(this.activeName, "now");
        }
        if (!this.$refs.doctor.checkfn()) {
          this.activeName = "2";
          this.changfn(this.activeName, "now");
        }
        return true;
      }

      this.params = Object.assign(
        this.params,
        this.$refs.hostail.params,
        this.$refs.keeper.params,
        this.$refs.doctor.params,
        this.$refs.project.params
      );
      console.log(this.params);
      let res = await saveComment(this.params);
      this.$message({
        message: res.data.msg,
        type: "warning"
      });
      if (res.data.code == 0) {
        this.$router.push({name:'itemEvaluateIndex'});
      }
    },

    handleClick(tab, event) {
      console.log(this.activeName);
      this.changfn(this.activeName, "now");
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0.1px !important;
}
.el-textarea__inner {
  display: block;
  width: 300px !important;
  min-height: 50px !important;
  box-sizing: border-box;
}
</style>
